<template>
  <view class="room">
    <!-- 头部导航 -->
    <view class="w-750 w-bj-white" style="position: fixed; top: 0; left: 0; z-index: 999;">
      <view class="h-100 w-row-justify-between-align">
        <view class="wh-80 w-row-center" @click="routerBack()">
          <image class="wh-40" src="../../../static/gane/goBack-icon.png"></image>
        </view>
        <view class="flex1 h-100 w-row-center w-wz-conts font-36">
          <text>{{typeText[querFrom.type-1]}}</text>
        </view>
        <view class="wh-80 w-row-center">
          <!-- <uni-datetime-picker type="datetimerange" @change="changeTiem">
            <image class="wh-50" src="../../../static/gane/rq.png"></image>
          </uni-datetime-picker> -->
        </view>
      </view>
    </view>
    <view class="bwh-120"></view>
    <!-- 头部导航结束 -->

    <view class="content-box padding-top-xs">
      <view class="cover-tw index-bg absolute-default absolute top-bg">
        <!-- 期数 -->
        <view class="padding-sm padding-top-xs padding-bottom-xs text-color-white number-font">
          <view class="van-row van-row--align-center disflex van-width">
            <view class="van-col van-col--10" style="font-size: 32rpx;">
              {{issueData.next_issue}}期
            </view>
            <view class="van-col van-col--14 disflex" style="justify-content: right;">
              <view class="text-center line-height-xs fl">
								<span>
									<b class="text-bold text-xs">开奖时间: {{issueData.start_time}}</b>
								</span>
              </view>
              <view class="line-height-xs fr margin-left-xs timer-box text-color-black">
                <view class="van-count-down" v-if="endTime">

                  <hbxw-count-down v-if="!timeUpShow && endTime" :start="startTime" :end="endTime"
                                   :showMillisecond="true" :interval="100" @end="timeUp()">
                    <template #content="{countDown}">
											<span class="text-lg">
												{{countDown.minutes}}
											</span>
                      <span class="text-lg">
												{{countDown.seconds}}
											</span>
                      <span class="text-lg">
												{{countDown.milliseconds}}
											</span>
                    </template>
                  </hbxw-count-down>
                  <div v-else-if="timeUpShow" class="disflex">
										<span class="text-lg">
											已
										</span>
                    <span class="text-lg">
											封
										</span>
                    <span class="text-lg">
											盘
										</span>
                  </div>
                </view>
              </view>

            </view>
          </view>
        </view>

        <view class="padding-left-sm padding-right-sm text-color-white number-font">
          <view class="rel open-box padding-left-sm padding-right-sm">
            <view class="cover-tw index-bg open-bg absolute-default absolute">

            </view>

            <view class="van-row van-row--align-center open-result text-center">
              <view class="van-col van-col--7">
                <div v-if="issueData.status==1">{{issueData.issue}}期</div>
                <div v-else>{{issueData.next_issue}}期 <span style="color: #ffff00;">正在出结果</span> </div>
              </view>
              <view class="van-col van-col--17">

                <!-- 开奖 -->
                <view class="number-font text-default"
                      v-if="issueData.status==1 && issueData.bet_array.bet_number.length">
									<span class="num">
										{{issueData.bet_array.bet_number[0]}}
									</span>
                  <span class="up pa">
										+
									</span>
                  <span class="num">
										{{issueData.bet_array.bet_number[1]}}
									</span>
                  <span class="up pa">
										+
									</span>
                  <span class="num">
										{{issueData.bet_array.bet_number[2]}}
									</span>
                  <span class="up pa">
										=
									</span>
                  <span class="num">
										{{issueData.bet_array.bet_tema}}
									</span>
                </view>

                <!-- 正在开奖滚动效果 -->
                <view class="number-font text-default" v-else>
									<span class="num">
										<ul class="number-roller">
											<li v-for="i in numberList">{{i}}</li>
										</ul>
									</span>
                  <span class="up pa">
										+
									</span>
                  <span class="num">
										<ul class="number-roller">
											<li v-for="i in numberList">{{i}}</li>
										</ul>
									</span>
                  <span class="up pa">
										+
									</span>
                  <span class="num">
										<ul class="number-roller">
											<li v-for="i in numberList">{{i}}</li>
										</ul>
									</span>
                  <span class="up pa">
										=
									</span>
                  <span class="num">
										<ul class="number-roller">
											<li v-for="i in numberList">{{i}}</li>
										</ul>
									</span>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="padding-sm padding-top-xs disflex padding-bottom-0 chat-user text-color-white number-font">
          <view class="van-row van-row--align-center disflex van-width">
            <view class="van-col van-col--12 rel disflex">
              <image v-if="userInfo.headimgurl" :src="userInfo.headimgurl" mode="widthFix"
                     class="radius-sm avatar fl margin-right-xs"></image>
              <image v-else src="@/static/gane/user.png" mode="widthFix"
                     class="radius-sm avatar fl margin-right-xs"></image>
              <span class="line-height-none text-bold" style="transform: translateY(4rpx);">
								余额：{{userMoney}}
							</span>
              <image src="@/static/gane/0.png" mode="widthFix" class="user-ico-game"></image>
            </view>
            <view class="van-col van-col--12">
              <view class="fr wallet">
                <button class="van-button van-button--default van-button--small margin-left-xs"
                        @click="toIndex">首页</button>
                <button class="van-button van-button--default van-button--small margin-left-xs"
                        @click="routerWallet()">充值</button>
                <button class="van-button van-button--default van-button--small margin-left-xs"
                        @click="routerWallet()">提现</button>
              </view>
            </view>
          </view>
        </view>
      </view>
      <scroll-view scroll-y="true" class="chat-box padding-left-sm padding-right-sm padding-top-xs envelope"
                   :scroll-into-view="lastItemId">
        <view class="fl full-width" v-for="(item,index) in list" :key="index" :id="`item${index}`">
          <view class="cell packet" :class="{'cell-r' : item.uid === userInfo.uid}">
            <view class="full-width fl rel">
              <view class="avatar avatar-r">
                <view class="van-image">
                  <image :src="item.headimgurl" class="van-image__img"
                         v-if="item.headimgurl && item.uid == userInfo.uid "></image>
                  <image :src="item.headimgurl" class="van-image__img" v-else-if="item.headimgurl">
                  </image>
                  <image src="@/static/gane/kefu.jpg" class="van-image__img" v-else-if="!item.uid">
                  </image>
                  <image src="@/static/gane/user.png" class="van-image__img"
                         v-else-if="item.type!='结算报表'"></image>
                  <image src="@/static/gane/kefu.jpg" class="van-image__img" v-else>
                  </image>
                </view>
              </view>

              <view class="name name-r">
                {{item.nickname}}
                <!-- <div class="tips" v-if="item.uid == userInfo.uid">你</div> -->
              </view>


              <view class="chat-item chat-item-r" style="font-size: 3vw !important;"

                    v-html="item.msg"></view>

            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="chat-menu full-width text-center">
      <view class="van-row van-row--align-center" style="justify-content: space-between;">
        <view class="van-col van-col--4" @click="toRecord">
          <button class="van-button van-button--default van-button--small van-button--round">
            <view class="van-button__content">
              <image class="icon" src="@/static/gane/record-icon.png" mode=""></image>
              记录
            </view>
          </button>
        </view>
        <view class="van-col van-col--4" @click="toTrend">
          <button class="van-button van-button--default van-button--small van-button--round">
            <view class="van-button__content">
              <image class="icon" src="@/static/gane/trend-icon.png" mode=""></image>
              走势
            </view>shi
          </button>
        </view>
        <view class="van-col van-col--4" @click="openRule">
          <button class="van-button van-button--default van-button--small van-button--round">
            <view class="van-button__content">
              <image class="icon" src="@/static/gane/rule-icon.png" mode=""></image>
              规则
            </view>
          </button>
        </view>
        <view class="van-col van-col--4" @click="routerCustomer()">
          <button class="van-button van-button--default van-button--small van-button--round">
            <view class="van-button__content">
              <image class="icon" src="@/static/gane/customer-icon.png" mode=""></image>
              客服
            </view>
          </button>
        </view>
        <view class="van-col van-col--4" @click="updateList">
          <button class="van-button van-button--default van-button--small van-button--round">
            <view class="van-button__content">
              <image class="icon" src="@/static/gane/refresh-icon.png" mode=""></image>
              刷新
            </view>
          </button>
        </view>
      </view>
    </view>

    <view class="chat-tools">
      <view class="bar">
        <view class="quick  text-center" @click="openBetting">
          快捷<br />
          下注
        </view>
      </view>

      <view class="funbar">
        <input type="text" v-model="input" class="input" placeholder="可输入玩法点数"  @confirm="defineForm()"/>
      </view>
      <view class="send text-center text-color-white" @click="defineForm()">
        发送
      </view>

      <image class="keyboardIcon" src="../../../static/gane/keyboard-icon.png" mode="" @click="openKeyboard">
      </image>
    </view>

    <!-- 规则 -->
    <uni-popup ref="RulePopup" type="bottom" border-radius="10px 10px 0 0">
      <view class="gameDetailBox" style="padding-bottom: 0 !important;">
        <view class="padding-sm">
          <view class=" icon-box">
            <view class="title">
              【{{typeText[querFrom.type-1]}}玩法介绍】
              <image class="close-icon" src="@/static/index/close-icon.png" @click="closeRule"></image>
            </view>
            <view class="max-height">
              <rich-text :nodes="roomInfo.desc"></rich-text>
            </view>


          </view>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" class="keyboard-popup">
      <view class="betting">
        <view class="padding-sm pop-bottom">
          <view class=" padding-bottom-sm title margin-bottom-xs">
            快捷输入
            <image class="close-icon" src="@/static/index/close-icon.png" @click="closeKeyboard"></image>
          </view>

          <view class="van-row" style="justify-content: space-between;">
            <view class="keyboard-item  margin-bottom-xs" v-for="(item,index) in keyboardItems" :key="index"
                  @click="updateInput(item)">
              <span class="keybordBtn">{{item}}</span>
            </view>
          </view>
        </view>


      </view>
    </uni-popup>

    <uni-popup ref="betting" type="bottom" border-radius="10px 10px 0 0">
      <view class="betting">
        <view class="padding-sm">
          <view class=" padding-bottom-sm title">
            快捷下注
            <image class="close-icon" src="@/static/index/close-icon.png" @click="closeBet"></image>
          </view>
        </view>

        <!-- <view>
          <view class=" padding-bottom-sm title sel">
            选玩法
          </view>
        </view> -->

        <view class="van-tabs van-tabs--line margin-top-xs">
          <view class="van-tabs__wrap">
			  <view class="tabs">
			  	<view class="tabs-item" v-for="(item,index) in tabs" :key="index" :class="{'tabs-item-cli': defaultIndex == index}" @click="tabClick(index)">
			  		{{item.name}}
			  	</view>
			  </view>
            <!-- <liuyuno-tabs :tabData="tabs" :underLineWidth="100" :activeIndex="defaultIndex"
                          @tabClick="tabClick" /> -->
          </view>
        </view>

        <view class="items" v-if="items.length>0">

          <view class="item " v-for="(item,index) in items" :key="index" @click="selItem(item,index)"
                :class="{updateItem: includesType(item.number)}">
            <view class="label">
              {{item.number}}
            </view>
            <view class="value">
              x{{item.odds}}
            </view>
          </view>
        </view>

        <view class="items" v-else-if="selRoom_odds.key=='santonghaodanxuan'">

          <view class="item " v-for="(item,index) in shdx_odds" :key="index"
                @click="selNumberItem(item,index)" :class="{updateItem: includesType(item)}">
            <view class="label">
              {{item}}
            </view>
            <view class="value">
              x{{selRoom_odds.odds}}
            </view>
          </view>
        </view>
        <view class="items" v-else-if="selRoom_odds.key=='ertonghaofuxuan'">

          <view class="item " v-for="(item,index) in ethfx_odds" :key="index"
                @click="selNumberItem(item,index)" :class="{updateItem: includesType(item)}">
            <view class="label">
              {{item}}
            </view>
            <view class="value">
              x{{selRoom_odds.odds}}
            </view>
          </view>
        </view>
        <view class="items " v-else-if="selRoom_odds.key=='ertonghaodanxuan'">

          <view class="item ls6" v-for="(item,index) in ethfxdx_odds" :key="index"
                @click="sel2tDanItem1(item,index)" :class="{updateItem: includesType(item)}">
            <view class="label">
              {{item}}
            </view>
            <view class="value">
              x{{selRoom_odds.odds}}
            </view>
          </view>

          <!-- <view class="item ls6" v-for="(item,index) in numberList" :key="index"
                @click="sel2tDanItem2(item,index)" :class="{updateItem: includesFuType(item)}">
            <view class="label">
              {{item}}
            </view>
            <view class="value">
              x{{selRoom_odds.odds}}
            </view>
          </view> -->
        </view>

        <view class="items " v-else>

          <view class="item ls6" v-for="(item,index) in numberList" :key="index"
                @click="selNumberItem(item,index)" :class="{updateItem: includesType(item)}">
            <view class="label">
              {{item}}
            </view>
            <view class="value">
              x{{selRoom_odds.odds}}
            </view>
          </view>

        </view>
        <view class="submit-bar">
          <view class="van-submit-bar van-safe-area-bottom">
            <view class="van-submit-bar__bar">
              <view class="van-submit-bar__text" style="text-align: left">
                共
                <span class="van-submit-bar__price-integer">{{pourData.length}}</span>
                注
              </view>

              <button @click="openSubBet" :disabled="!selList.length"
                      class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">下一步</button>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="subbetting" type="bottom" border-radius="10px 10px 0 0">
      <view class="betting betting-padding-500">
        <view class="padding-sm">
          <view class=" padding-bottom-sm title">
            确认下注金额
            <image class="close-icon" src="@/static/index/close-icon.png" @click="closeSubBet"></image>
          </view>
        </view>

        <view class="van-cell van-field disflex">
          <view class="van-cell__title van-field__label">
            <label for="van-field-4-input">下注金额</label>
          </view>

          <view class="van-cell__value van-field__value">
            <view class="van-field__body">
              <input id="van-field-27-input" type="number" min="1" step="1" v-model="price"
                     class="van-field__control" placeholder="请输入下注金额" />
            </view>
          </view>
        </view>

        <view class="margin-top-sm title-align">
          快速选择
        </view>

        <view class="van-row margin-top-sm">
          <view class="van-col van-col--3 margin-bottom-xs title-align" v-for="(item,index) in priceList"
                :key="index" @click="countPrice(item)">
            <view class="keybordBtn">
              {{item}}
            </view>
          </view>

          <view class="van-col van-col--3 margin-bottom-xs title-align" @click="price = null">
            <view class="keybordBtn">
              清空
            </view>
          </view>
        </view>

        <view class="submit-bar">
          <view class="van-submit-bar van-safe-area-bottom">
            <view class="van-submit-bar__bar">
              <view class="van-submit-bar__text" style="text-align: left">
                共
                <span class="van-submit-bar__price-integer">{{pourData.length}}</span>
                注，投注金额<span class="van-submit-bar__price-integer">{{price || 0}}</span>元
              </view>

              <button :disabled="!price" @click="betting()"
                      class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">确认下注</button>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import $H from '@/pages/common/request.js'

import hongbaoicon from '@/static/gane/hongbao.png'
import hongbaoiconN from '@/static/gane/hongbao-n.png'
export default {
  data() {
    return {
      hongbaoicon,
      hongbaoiconN,
      typeText: ['韩国快3', '韩国极速快3'],

      list: [],
      time: null,
      lastItemId: null,
      activeShow: false,
      priceList: [10, 50, 100, 500, 1000, 5000],
      price: null,
      countdownTime: 1 * 60 * 60 * 60 * 1000,
      numberList: [1, 2, 3, 4, 5, 6],
      currentViewId: 'number-0', // 初始滚动到的目标id，先定位到0
      index: 0, // 当前显示数字的索引
      tabs: [],
      room_odds: [],
      defaultIndex: 0,
      items: [],
      selList: [],
      selFuList: [],
      keyboardItems: ['大', '小', '单', '双', '豹', '杂', '和值', '四', '五', '全', '半', '顺', '跨', '黑', '红',
        ',', '/', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '军', '二同号', '二不同', '二同单选', '-', '三同单选',
        '三不同', '清空', '←',
      ],
      input: '',
      postData: { //下注
        roomId: 0,
        gameType: 0, //游戏类型
        money: 0, //红包金额
      },
      querFrom: {
        pagenum: 1,
        pagesize: 20,
        type: 1,
      },
      gameTypeArr: {
        '和值': 'caihezhi',
        '三军': 'sanjun',
        '三同单选': 'santonghaodanxuan',
        '二同号': 'ertonghaofuxuan',
        '二同单号': 'ertonghaodanxuan',
        '二同单选':'ertonghaodanxuan',
        '跨': 'kuadu',
        '三不同': 'sanbutonghao',
        '二不同': 'erbutonghao',
        '四码黑': 'simahei',
        '四码红': 'simahong',
        '五码黑': 'wumahhei',
        '大': 'caizuhe',
        '小': 'caizuhe',
        '单': 'caizuhe',
        '双': 'caizuhe',
        '大单': 'caizuhe',
        '大双': 'caizuhe',
        '小单': 'caizuhe',
        '小双': 'caizuhe',
        '全顺': 'caizuhe',
        '半顺': 'caizuhe',
        '杂': 'caizuhe',
        '红码': 'caizuhe',
        '黑码': 'caizuhe',
        '红单': 'caizuhe',
        '红双': 'caizuhe',
        '红大': 'caizuhe',
        '红小': 'caizuhe',
        '黑单': 'caizuhe',
        '黑双': 'caizuhe',
        '黑大': 'caizuhe',
        '黑小': 'caizuhe',
        '豹': 'caizuhe'
      },
      roomInfo: {
        room_odds: []
      },
      selRoom_odds: {},
      sanjun_odds: [1, 2, 3, 4, 5, 6],
      shdx_odds: [111, 222, 333, 444, 555, 666],
      ethfx_odds: [11, 22, 33, 44, 55, 66],
	  ethfxdx_odds: [
  112, 113, 114, 115, 116,
  221, 223, 224, 225, 226,
  331, 332, 334, 335, 336,
  441, 442, 443, 445, 446,
  551, 552, 553, 554, 556,
  661, 662, 663, 664, 665
],
      issueData: {
        bet_array: {
          bet_number: [0, 0, 0],
        }
      },
      lastTime: '',
      room_bettype: '',
      pourData: [],
      startTime: '',
      endTime: '',
      userInfo: {},
      isOpenKeyboard: false,
      timeUpShow: false,
      userMoney: 0,
    }
  },
  beforeCreate() {
    const isLoading = localStorage.getItem('isLoading')
    if (!isLoading) {
      uni.showLoading({
        title: '数据加载中',
        mask: true
      });
    }
  },
  onLoad(option) {

    this.querFrom.type = this.postData.gameType = option.type;
    this.room_label = option.room_label;
    this.postData.roomId = option.roomId;
    this.querFrom.roomId = option.roomId;
    this.getRoom();
    this.getUserInfo()
    this.getIssueData()
  },
  onUnload() {

    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null

    }
    localStorage.removeItem('isLoading')
  },

  onHide() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null

    }
    localStorage.removeItem('isLoading')
  },
  onShow() {
    this.endTime = ""
    this.getIssueData()
    this.AutoLoadTime();
  },

  methods: {
    handleEnter(event) {
      console.log("回车键被按下！");
      console.log("输入的内容：", event.target.value);
    },
    AutoLoadTime() {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.getIssueData()
      }, 3000);
    },

    getUserInfo() {
      $H.post('/app_user_get_userinfo').then((res) => {
        if (res.code == 200) {
          this.userInfo = res.data

          uni.setStorageSync('UserInfo', res.data)
        }
      })
    },

    getRoom() {
      $H.post('/app_k3_room_odds', {
        type: this.postData.gameType,
        roomId: this.postData.roomId
      }).then((res) => {
        if (res.code == 200) {
          this.roomInfo = res.data;

          const data = this.roomInfo.room_odds;
          // console.log(this.gameTypeArr, 'gameTypeArr')

          const dataArray = Object.keys(data).map(key => {
            return {
              key: key,
              title: data[key].name,
              ...data[key]
            };
          });
          this.tabs = dataArray;

          this.room_bettype = dataArray[0].key
          this.items = this.tabs[0].list

        }
      })
    },
    // 更新
    updateList() {
      this.list = [];
      this.getIssueData();
      this.$nextTick(() => {
        this.lastItemId = `item${this.list.length - 1}`;
      });
    },

    // 倒计时结束
    timeUp() {
      this.timeUpShow = true
    },

    getIssueData() {

      $H.post('/k3_issue_data', {
        'type': this.postData.gameType,
        'room_label': this.room_label,
        'last_time': this.lastTime,
      }).then((res) => {
        if (res.code == 200 && res.data) {
          this.issueData = res.data;
          if (res.data && res.data.last_time) {
            this.lastTime = res.data.last_time;
          }

          this.timeUpShow = res.data.title === '正在进行...'

          this.userMoney = res.data.amoney
          let pourArray = res.data.pour_array
          if(pourArray){
            pourArray.forEach((value) => {
              if (this.list.length == 0) {
                this.list.push(value)
              }
              let result = this.list.find(item => item.id == value.id)
              if (!result) {

                this.list.push(value)
              }

            })
          }

          this.$nextTick(() => {
            this.lastItemId = `item${this.list.length - 1}`
          })
          this.startTime = this.getNowDate()

          this.endTime = res.data.endTime
          localStorage.setItem('isLoading', true)
          uni.hideLoading();

        }
      })
    },
    getNowDate() {
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = String(currentDate.getMonth() + 1).padStart(2, '0');
      const day = String(currentDate.getDate()).padStart(2, '0');
      const hours = String(currentDate.getHours()).padStart(2, '0');
      const minutes = String(currentDate.getMinutes()).padStart(2, '0');
      const seconds = String(currentDate.getSeconds()).padStart(2, '0');
      return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
    },
    getDateFromMinutesSeconds(hour = 0, minutes = 0, seconds = 0) {
      // 获取当前时间的时间戳
      const currentTime = new Date().getTime();
      // 将分秒转化为毫秒
      const timeToAdd = (minutes * 60 + seconds) * 1000;
      // 把要增加的小时数也转化为毫秒并累加到总时间里
      const hoursInMs = hour * 60 * 60 * 1000;
      const totalTimeToAdd = timeToAdd + hoursInMs;
      // 计算新的时间戳
      const newTime = currentTime + totalTimeToAdd;
      // 创建新的日期对象
      const newDate = new Date(newTime);
      // 格式化日期
      const year = newDate.getFullYear();
      const month = String(newDate.getMonth() + 1).padStart(2, '0');
      const day = String(newDate.getDate()).padStart(2, '0');
      const hours = String(newDate.getHours()).padStart(2, '0');
      const minutesValue = String(newDate.getMinutes()).padStart(2, '0');
      const secondsValue = String(newDate.getSeconds()).padStart(2, '0');
      return `${year}/${month}/${day} ${hours}:${minutesValue}:${secondsValue}`;
    },
    tabClick(e) {
      this.pourData =[];
      this.defaultIndex = e
      this.selRoom_odds = this.tabs[e]
      console.log(this.selRoom_odds, 'this.selRoom_odds');
      this.room_bettype = this.selRoom_odds.key
      if (this.selRoom_odds.list) {
        this.items = this.selRoom_odds.list
      } else {
        this.items = [];
      }

      // 切换清空选择数据
      this.selList = []
      this.pourData = []
      // console.log(e,'e')
    },
    openKeyboard() {
      this.isOpenKeyboard = !this.isOpenKeyboard;
      if (this.isOpenKeyboard) {
        this.$refs.popup.open()
      } else {
        this.$refs.popup.close()
      }
    },

    closeKeyboard() {

      this.$refs.popup.close()
    },

    openRule() {
      this.$refs.RulePopup.open()
    },

    closeRule() {
      this.$refs.RulePopup.close()
    },

    openBetting() {
      this.$refs.betting.open()
    },
    closeBet() {
      this.$refs.betting.close()
    },

    openSubBet() {
      this.$refs.subbetting.open()
    },

    closeSubBet() {
      this.$refs.subbetting.close()
    },

    countPrice(num) {
      this.price = Number(this.price)+ Number(num)
    },

    // 快捷输入
    updateInput(item) {
      if (item === '空格') {
        this.input = this.input + ' '
      } else if (item === '清空') {
        this.input = ''
      } else if (item === '发送') {
        // 执行提交接口
      } else if (item === '←') {
        this.input = this.input.substring(0, this.input.length - 1)
      } else if (item === '四') {
        this.input = this.input + '四码'
      } else if (item === '五') {
        this.input = this.input + '五码黑'
      } else if (item === '军') {
        this.input = this.input + '三军'
      } else {
        this.input = this.input + item
      }

    },

    // 选择普通数据
    selItem(item, index) {

      if (this.selList.includes(item.number)) {

        this.selList = this.selList.filter(value => value != item.number)
        const key = this.selList.indexOf(item.number)
        this.pourData.splice(key, 1)
      } else {
        if (this.pourData.length >= 5) {
          return uni.showToast({
            title: '单次下单不能超过5单',
            duration: 1000,
            icon: 'none'
          });
        }
        this.selList = this.selList.includes(item.number) ?
            this.selList.filter(value => value !== item.number) : [...this.selList, item.number];
        // console.log(this.selList,item,'this.selList')

        this.pourData.push(item)
      }
      

    },
    sel2tDanItem1(id) {
	const odds = this.selRoom_odds.odds
      // this.pourData = [];
      if (this.selList.includes(id)) {
        this.selList = this.selList.filter(value => value != id)
		const key = this.selList.indexOf(id)
		this.pourData.splice(key, 1)
      } else {
        if (this.pourData.length >= 5) {
          return uni.showToast({
            title: '单次下单不能超过5单',
            duration: 1000,
            icon: 'none'
          });
        }
        this.selList = this.selList.includes(id) ?
            this.selList.filter(value => value !== id) : [...this.selList, id];
		this.pourData = []
		for(let i in this.selList) {
			let item = {
			  number: this.selList[i],
			  odds: odds
			}
			this.pourData.push(item)
		}
		
		
		console.log(this.pourData, 'this.pourData');
        // const dan = id % 10;
        // if (this.selFuList.includes(dan)) {
        //   this.selFuList = this.selFuList.filter(value => value != dan)
        // }
        // this.setPourData()
      }

    },
    sel2tDanItem2(id) {

      if (this.selFuList.includes(id)) {
        this.selFuList = this.selFuList.filter(value => value != id)

      } else {
        if (this.pourData.length >= 5) {
          return uni.showToast({
            title: '单次下单不能超过5单',
            duration: 1000,
            icon: 'none'
          });
        }
        this.selFuList = this.selFuList.includes(id) ?
            this.selFuList.filter(value => value !== id) : [...this.selFuList, id];

        const dan = id * 10 + id;
        if (this.selList.includes(dan)) {
          this.selList = this.selList.filter(value => value != dan)
        }
      }

      this.setPourData()
    },

    setPourData() {
      const odds = this.selRoom_odds.odds
      let item = {}
      // 用于存储所有组合
      const combinations = [];
      if (this.selFuList.length > 0 && this.selList.length > 0) {
        // 使用嵌套循环遍历两个数组的每个元素
        for (let i = 0; i < this.selList.length; i++) {
          for (let j = 0; j < this.selFuList.length; j++) {
            // 将两个元素拼接成一个字符串
            const number = this.selList[i].toString() + this.selFuList[j].toString();
            item = {
              number: number,
              odds: odds
            }
            combinations.push(item)
          }
        }
      }

      this.pourData = combinations
    },
    selNumberItem(id, index) {
      const odds = this.selRoom_odds.odds
      let item = {};



      if (this.selList.includes(id)) {
        this.selList = this.selList.filter(value => value != id)
        const key = this.selList.indexOf(id)
        this.pourData.splice(key, 1)
      } else {

        if (this.room_bettype == 'sanbutonghao') {

          if (this.selList.length >= 3) {
            return uni.showToast({
              title: '最多可选3个数',
              duration: 1000,
              icon: 'none'
            });
          }
          this.selList = this.selList.includes(id) ?
              this.selList.filter(value => value !== id) : [...this.selList, id];
          if (this.selList.length == 3) {
            item.number = this.selList[0].toString() + this.selList[1].toString() + this.selList[2]
                .toString()
            item.odds = odds
            this.pourData.push(item)
          }


        } else if (this.room_bettype == 'erbutonghao') {
          if (this.selList.length >= 2) {
            return uni.showToast({
              title: '最多可选2个数',
              duration: 1000,
              icon: 'none'
            });
          }
          this.selList = this.selList.includes(id) ?
              this.selList.filter(value => value !== id) : [...this.selList, id];
          if (this.selList.length == 2) {
            let number = ''
            for (let j = 0; j < this.selList.length; j++) {
              // 将两个元素拼接成一个字符串
              number += this.selList[j].toString()

            }
            item.number = number
            item.odds = odds
            this.pourData.push(item)
          }
        } else if (this.room_bettype == 'simahei' || this.room_bettype == 'simahong') {
          if (this.selList.length >= 4) {
            return uni.showToast({
              title: '最多可选4个数',
              duration: 1000,
              icon: 'none'
            });
          }
          this.selList = this.selList.includes(id) ?
              this.selList.filter(value => value !== id) : [...this.selList, id];
          if (this.selList.length == 4) {
            let number = ''
            for (let j = 0; j < this.selList.length; j++) {
              // 将两个元素拼接成一个字符串
              number += this.selList[j].toString()

            }
            item.number = number
            item.odds = odds
            this.pourData.push(item)
          }
        } else if (this.room_bettype == 'wumahhei') {
          if (this.selList.length >= 5) {
            return uni.showToast({
              title: '最多可选5个数',
              duration: 1000,
              icon: 'none'
            });
          }
          this.selList = this.selList.includes(id) ?
              this.selList.filter(value => value !== id) : [...this.selList, id];
          if (this.selList.length == 5) {
            let number = ''
            for (let j = 0; j < this.selList.length; j++) {
              // 将两个元素拼接成一个字符串
              number += this.selList[j].toString()

            }
            item.number = number
            item.odds = odds
            this.pourData.push(item)
          }
        } else {
          if (this.pourData.length >= 5) {
            return uni.showToast({
              title: '单次下单不能超过5单',
              duration: 1000,
              icon: 'none'
            });
          }
          this.selList = this.selList.includes(id) ?
              this.selList.filter(value => value !== id) : [...this.selList, id];
          item.number = id
          item.odds = odds
          this.pourData.push(item)
        }
      }

    },

    // 渲染选中数据
    includesType(id) {
      return this.selList.includes(id)
    },
    // 渲染选中数据
    includesFuType(id) {
      return this.selFuList.includes(id)
    },

    // 键盘投注
    defineForm() {
      if (this.submitLock) return
      if (Number(this.issueData.end_time.second) < 0) {
        return uni.showToast({
          title: `封盘中`,
          duration: 1000,
          icon: 'none'
        });
      }
      if (this.input == '') {
        return uni.showToast({
          title: '下单内容为空',
          duration: 1000,
          icon: 'none'
        });
      }

      const num_list = ['大', '小', '单', '双', '豹', '杂', '和值','大单','小单','大双','小双', '四码红', '四码黑', '五码黑', '全', '半', '顺', '跨', '黑码', '红码',
        ',', '/', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '军', '二同号', '二不同', '二同单选', '-', '三同单选',
        '三不同', '红单', '红双', '红大', '红小', '黑单', '黑双', '黑大', '黑小','全顺','半顺'
      ]

      let bet_list = this.input.split(" ")
      let inputtext = bet_list;
      if (bet_list.length <= 1) {
        //判断是否非连着输入
        let arr = this.input.match(/(\D+)(\d+)\/(\d+)/)
        if (arr && arr.length >= 2) bet_list = arr

        if (bet_list.length < 2) {
          let arrY = this.input.split("/");
          if (arrY && arrY.length >= 2) bet_list = arrY
          bet_list.unshift(inputtext[0])

          // 第二种格式
          // 1. 去除多余的字符
          const cleanedStr = this.input.replace(/[\[\]'()]/g, ''); // 去掉 []'()

          // 2. 根据逗号拆分
          const splitResult = cleanedStr.split(","); // 使用逗号拆分
          const splitResult2 = cleanedStr.split("-"); // 使用-拆分
          // console.log(splitResult,splitResult2,'cleanedStr')
          // 3. 转换数据类型
          let rule2Arr = []
          if(splitResult.length > 1) {
            rule2Arr = [`${splitResult[0]}/${splitResult[1]}`,splitResult[0], parseInt(splitResult[1], 10)];
          }
          if(splitResult2.length > 1) {
            rule2Arr = [`${splitResult2[0]}/${splitResult2[1]}`,splitResult2[0], parseInt(splitResult2[1], 10)];
          }
          if(rule2Arr.length > 0) bet_list = rule2Arr
          // console.log(rule2Arr,'rule2Arr')
        }



        if (bet_list.length < 2) {

          return uni.showToast({
            title: '下单规则错误',
            duration: 1000,
            icon: 'none'
          });
        }

        let bet_array = []
        console.log(bet_list,'bet_list3');

        let type = bet_list[1];

        let number = "";
        let money = 0;
        if (type == '黑') {
          type = '黑码';
        } else if (type == '红') {
          type = '红码';
        } else if (type == '全' || type == '顺') {
          type = '全顺';
        }
        else if (type == '半') {
          type = '半顺';
        }else if(type == '豹' && bet_list.length==4) {
          type = '三同单选'
        }else if (type == '二不同') {
          const str = bet_list[2]
          if(str.length!=2){
            return uni.showToast({
              title: '格式错误，例如：二不同12/10',
              duration: 1000,
              icon: 'none'
            });
          }


			const isSame = str.split('').every((char, index, arr) => char === arr[0]);
			if(isSame) {
				return uni.showToast({
				  title: '不可输入相同号码',
				  duration: 1000,
				  icon: 'none'
				});
			}
		}
		else if (type == '四码黑' || type == '五码黑') {

			// 使用 Set 去重
			const uniqueChars = new Set(bet_list[2]);

			if(uniqueChars.size !== bet_list[2].length) {
				return uni.showToast({
				  title: '不可输入相同号码',
				  duration: 1000,
				  icon: 'none'
				});
			}
		}
    else if(type == '四码黑'|| type == '四码红'){
          const str = bet_list[2]
          if(str.length!=4){
            return uni.showToast({
              title: '格式错误，例如：四码黑1234/10',
              duration: 1000,
              icon: 'none'
            });
          }
    }
        else if(type == '五码黑'){
          const str = bet_list[2]
          if(str.length!=5){
            return uni.showToast({
              title: '格式错误，例如：五码黑12345/10',
              duration: 1000,
              icon: 'none'
            });
          }
        }
    this.room_bettype = this.gameTypeArr[type];
		
		// let typeData = []
		// if(this.room_bettype) {
		// 	typeData = this.tabs.find(item => item.key === this.room_bettype)
		// }

        if (this.room_bettype == 'caizuhe') {
          number = type;
          money = bet_list[2];
        }else if(bet_list.length==4) {
          number = bet_list[2];
          money = bet_list[3];
        } 
		
		else if(bet_list.length == 3) {
			// 和值数据
			const typeData = this.tabs[0].list
			const hzNumberArr = typeData.map(item => item.number)
			// console.log(hzNumberArr,'typeData')
			// 三同号单选
			if(this.shdx_odds.includes(Number(bet_list[1]))) {
				type = '三同单选'
			}
			// 和值
			else if(hzNumberArr.includes(bet_list[1])) {
				type = '和值'
			}
			// 二通单选
			else if(this.ethfxdx_odds.includes(Number(bet_list[1]))) {
				type = '二同单选'
			}
			
			number = bet_list[1];
			money = bet_list[2];
			this.room_bettype = this.gameTypeArr[type];
			
		} else {
          number = bet_list[1];
          money = bet_list[2];
        }
		
		if(type == '三同单选') {
			if(number.length < 3){
				number = number.padEnd(3, number);
			}
			if(!this.shdx_odds.includes(Number(number))) {
				return uni.showToast({
				  title: '下单号码错误',
				  duration: 1000,
				  icon: 'none'
				});
			}
			// console.log(number,number.length,'number')
		}
        if (isNaN(Number(money))) return uni.showToast({
          title: '下单金额错误',
          duration: 1000,
          icon: 'none'
        })
        if (number.trim() == "" || number.trim() == null) return uni.showToast({
          title: '下单号码为空',
          duration: 1000,
          icon: 'none'
        })

        if (num_list.includes(type)) {
          bet_array.push({
            number,
            money
          })
        } else {
          return uni.showToast({
            title: '下单号码错误',
            duration: 1000,
            icon: 'none'
          })
        }

        if (bet_array.length > 0) this.submitOrder(bet_array, 2)

      } else {
        let bet_array = []
        console.log(this.tabs,'bet_list')
        for (let i in bet_list) {

          // 	let arr = bet_list[i].match(/(\D+)(\d+)\/(\d+)/)

          // 	if (!arr || arr.length < 3) {
          // 		return uni.showToast({
          // 			title: '下单规则错误',
          // 			duration: 1000,
          // 			icon: 'none'
          // 		});
          // 	}else{
          // 		let arrY = this.input.split("/");
          // 	}
          let arr = bet_list[i].split("/");



          // if(arr)

          let number = arr[0];
          // let odds = arr[2];
          let money = arr[1];
          if (number == '黑') {
            number = '黑码';
          } else if (number == '红') {
            number = '红码';
          } else if (number == '全' || number == '顺') {
            number = '全顺';
          }
          else if (number == '半') {
            number = '半顺';
          }
          this.room_bettype = this.gameTypeArr[number];
          let typeData = this.tabs.find(item => item.key === this.gameTypeArr[number])

          let odds = typeData.list.find(item => item.number === number).odds || null
          // console.log(odds,'gameTypeArr')
          // for(let )
          if (isNaN(Number(money))) return uni.showToast({
            title: '下单金额错误',
            duration: 1000,
            icon: 'none'
          })
          if (number.trim() == "" || number.trim() == null) return uni.showToast({
            title: '下单号码为空',
            duration: 1000,
            icon: 'none'
          })
          if (num_list.includes(number)) {
            bet_array.push({
              number,
              odds,
              money
            })
          } else {
            return uni.showToast({
              title: '下单号码错误',
              duration: 1000,
              icon: 'none'
            })
          }
        }

        if (bet_array.length > 0) this.submitOrder(bet_array, 2)
      }
    },

    // 下注
    betting() {
      if (!this.price) {
        // console.log(1111)
        return uni.showToast({
          title: '请输入大于0的数字',
          duration: 1000,
          icon: 'none'
        });
      }
      let bet_array = []
      this.pourData.forEach((item) => {
        let sortedStr = item.number.toString();

        if (!isNaN(Number(sortedStr)) && isFinite(sortedStr) && typeof sortedStr === 'string' &&
            sortedStr != '10') {
          // 将字符串转换为字符数组
          const charArray = sortedStr.split('');
          // 对字符数组进行排序
          const sortedArray = charArray.sort();

          // 将排序后的字符数组重新组合成一个字符串
          sortedStr = sortedArray.join('');
        }

        bet_array.push({
          number: sortedStr,
          odds: item.odds,
          money: this.price
        })
      })
      if (bet_array.length > 0) this.submitOrder(bet_array, 1)
    },
    // 提交订单
    submitOrder(bet_array, type) {
      if (this.submitLock) return
      this.submitLock = true
      let typeList = ['hgk3', 'jshgk3']
      const formData = {
        bet_type: type,
        bet_array: bet_array,
        game_type: typeList[this.querFrom.type - 1],
        room_label: this.roomInfo.room_label,
        room_bettype: this.room_bettype,
        type: this.roomInfo.type
      }
      // console.log(bet_array)
      uni.showLoading({
        title: '下单中',
        mask: false
      });
      // 提交订单
      $H.post('/k3_user_betpour', formData).then((res) => {
        uni.hideLoading();
        uni.showToast({
          title: res.msg,
          duration: 1000,
          icon: 'none'
        });
        if (res.code == 200) {

          this.pourData = []
          this.selList = []
          this.price = null
          this.input = ''
          this.closeBet()
          this.closeKeyboard()
          this.closeSubBet()
          this.getIssueData()
          this.getUserInfo()
        } else {
          uni.showToast({
            title: res.msg,
            duration: 1000,
            icon: 'none'
          });
        }
      }).finally(() => {
        this.submitLock = false
      })

    },
    toIndex() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },

    toTrend() {
      uni.navigateTo({
        url: '/pages/game/k3/trend?type=' + this.querFrom.type
      });
    },

    // 记录
    toRecord() {
      const types = ['hgk3', 'jshgk3']
      // uni.navigateTo({
      // 	url: `/pages/my/record/list?index=3&game_type=${types[this.querFrom.type - 1]}`
      // });
      uni.navigateTo({
        url: `/pages/my/order/order?game_type=${types[this.querFrom.type - 1]}`
      });
    }
  },
  mounted() {
    // this.startScroll(); // 组件挂载后启动滚动

  }
}
</script>

<style scoped lang="scss">
body {
  background-color: #f0f3ff !important;
  font-size: 3.46667vw;
  color: #535d76;
}

.keyboard-popup {
  z-index: 996 !important;
}

.pop-bottom {
  padding-bottom: 18.66667vw;
}

.cell-r {
  float: right !important;
  padding-right: 8vw !important;

  .avatar-r {
    float: right !important;
  }

  .name-r {
    display: flex;
    justify-content: right !important;
    float: left !important;
  }

  .chat-item-r {
    margin: 0 3.2vw 0 0 !important;
    float: right !important;

    &::after {
      right: -2.13333vw !important;
      left: auto !important;
    }
  }

  .small-r {
    transform: none !important;
  }
}

.room {
  .gameDetailBox {
    padding-bottom: 140rpx;
    background-color: #fff;
    font-size: 24rpx !important;
    color: #535d76;
    line-height: 50rpx;

    // .title {
    // 	position: relative;
    // 	padding-right: 60rpx;
    // }

    .icon-box {

      .title {
        position: relative;
        padding-right: 60rpx;

        .close-icon {
          width: 32rpx;
          height: 32rpx;
          position: absolute;
          top: 0;
          margin-top: 10rpx;
          right: 0;
        }
      }

    }
  }



  .open-bg {
    background-image: url('@/static/gane/open-bg.png') !important;
  }

  .open-result {
    height: 14.13333vw;
  }

  .number-font {
    .num {
      display: inline-block;
      overflow: hidden;
      width: 9.33333vw;
      transform: translateY(.8vw);
      height: 9.33333vw;
      line-height: 9.33333vw;
      font-size: 7.46667vw;
      border: .53333vw solid #ccb581;
      border-radius: 1.06667vw;
      background-color: #242424;
    }

    .pa {
      padding: 0 1.06667vw;
    }

    .up {
      transform: translateY(-2.66667vw);
      position: relative;
      display: inline-block;
    }
  }

  .timer-box {
    font-family: LcdD;

    .text-lg {
      font-size: 30rpx;
      text-indent: -.8vw;
      width: 11.2vw;
      height: 9.6vw;
      line-height: 8.53333vw;
      position: relative;
      text-align: center;
      margin-right: -1.33333vw;
      font-weight: 500;
      float: left;
      background-image: url('@/static/gane/countdown-bg.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }

  .betting-padding-500 {
    padding-bottom: 500rpx;
  }

  .betting {
    // padding-bottom: 500rpx;
    background-color: #fff;

    .items {
      //height: 500rpx;

      padding-bottom: 160rpx;
      padding-top: 40rpx;
      overflow-y: scroll;
      display: flex;
      flex-wrap: wrap;
      align-content: baseline;

      .item {

        margin: 9rpx;
        text-align: center;
        color: #F4AF00;
        line-height: 1.4;
        height: 80rpx;
        border: 1px solid #F4AF00;
        border-radius: 10rpx;
        flex: 0 0 calc(25% - 24rpx);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .label {
          color: #666;
        }

        /* 每个元素占据一行宽度的25%（4个元素一行），减去 margin 所占空间 */
      }

      .ls6 {
        flex: 0 0 calc(16.66% - 24rpx);
      }

      .updateItem {
        background-color: #F4AF00;
        color: #fff !important;

        .label {
          color: #fff !important;
        }
      }


    }

    color: #535d76;
    line-height: 50rpx;

    .keyboard-item {
      .keybordBtn {
        width: auto;
        height: 9.33333vw;
        line-height: 9.33333vw;
        display: inline-block;
        border-radius: 1.06667vw;
        background-color: #e4e4e4;
        text-align: center;
        padding: 0px 5px;
        margin: 0px 2px;
        min-width: 5vw;
        font-weight: bold;
      }
    }

    .title {
      text-align: center;
      position: relative;
      padding: 0 60rpx;
      font-size: 30rpx !important;

      .close-icon {
        width: 32rpx;
        height: 32rpx;
        position: absolute;
        top: 0;
        margin-top: 10rpx;
        right: 0;
      }
    }

    .sel {
      &:before {
        content: '';
        position: absolute;
        bottom: -10rpx;
        left: 0;
        z-index: 1;
        width: 10.66667vw;
        height: .8vw;
        background: #F4AF00;
        border-radius: .8vw;
        transform: translateX(375rpx) translateX(-50%);
        transition-duration: 0.3s;
      }
    }

    .quickItem {
      background-color: #fff !important;
      color: #F4AF00 !important;
    }

    .active {
      background-color: #F4AF00 !important;
      color: #fff !important;
    }

    .van-field__label {
      margin-bottom: 0;
    }

    .submit-bar {
      position: fixed;
      bottom: -1px;
      left: 0px;
      right: 0px;
      height: 14.93333vw;
      background-color: #fff;
      border-top: 1px solid #f4f4f4;
      z-index: 6500;

      .van-submit-bar__bar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 13.33333vw;

        padding: 0 4.26667vw;
        font-size: 3.73333vw;

        .van-submit-bar__text {
          flex: 1;
          line-height: 13.33333vw;
          padding-right: 3.2vw;
          color: #323233;

        }
      }
    }
  }

  ::v-deep .uni-popup {
    z-index: 1000;
  }

  .w-row-center {
    color: #323233 !important;
    font-weight: 600;
    font-size: 4.26667vw;
  }

  .bwh-120 {
    background-color: #f0f3ff !important;
  }

  .content-box {
    height: calc(100% - 26.93333vw);
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1;
    padding-bottom: 3.2vw;
    bottom: 14.13333vw;
    top: 12.8vw;

    .chat-user {
      .avatar {
        width: 8.53333vw;
        transform: translateY(.53333vw);
        background-color: transparent;
      }
    }

    .index-bg {
      background-image: url('@/static/gane/header-bg.png');
      background-repeat: no-repeat;
      background-size: 100% auto;
      // height: 14.66667vw;
    }

    .van-button {
      padding: 0 4vw;
      height: 6.93333vw !important;
      line-height: 6.93333vw !important;
      background-color: #fffc;
      font-size: 3.2vw;
      color: #323233;
    }



    .chat-box {
      width: 100%;
      position: absolute;
      top: 42.66667vw;
      bottom: 16.8vw;
      left: 0px;
      right: 0px;
      overflow-y: scroll;
      overflow-x: hidden;

      .cell {
        width: 100%;
        float: left;
        position: relative;
        margin-bottom: 4vw;
      }
    }

    // .envelope {
    // 	top: 16vw;
    // }

    .name {
      font-size: 3.2vw;
      color: #a5a5a5;
      width: calc(100% - 15.46667vw);
      float: right;
      line-height: 5.33333vw;
    }

    .small {
      width: 11.46667vw;
      height: 4.26667vw;
      transform: translateY(.8vw);
    }

    .vip-tag {
      background-repeat: no-repeat;
      background-size: auto 100%;
      display: inline-block;
    }

    .open {
      background-color: #fce1c3 !important;

      &::after {
        color: #fce1c3 !important;
      }
    }

    .chat-item {
      font-size: 4.26667vw;
      min-width: 16vw;
      max-width: 67%;
      background-color: #fff;
      line-height: 5.33333vw;
      padding: 3.46667vw 4vw;
      border-radius: 1.6vw;
      word-wrap: break-word;
      word-break: break-all;
      margin: 0 0 0 3.2vw;
      float: left;
      position: relative;
      // min-height: 12.26667vw;

      &::after {
        color: #fff;
        content: "\25c6";
        position: absolute;
        top: 3.46667vw;
        left: -2.13333vw;
        font-size: 5.33333vw;
        line-height: 5.33333vw;
      }

      .hongbao {
        width: 12vw;
        height: 100rpx;
        float: left;
      }

      .info {
        margin-left: 14.13333vw;
        color: #fff;
        text-shadow: 0 0 1px rgba(0, 0, 0, .1);

        & span:nth-child(2) {
          float: right;
        }
      }

      .bar {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 5.86667vw;
        line-height: 5.86667vw;
        font-size: 3.2vw;
        padding: 0 2.66667vw;
        border-radius: 0 0 1.6vw 1.6vw;

        &::before {
          content: "";
          position: absolute;
          top: 0px;
          left: 2.66667vw;
          right: 2.66667vw;
          border-top: 1px solid rgba(255, 255, 255, .6)
        }

        b {
          position: relative;
          float: left;
          transform: scale(.9);
          color: #fff9;
        }

      }
    }

  }

  .chat-menu {
    position: fixed;
    right: 0px;
    bottom: 15.46667vw;
    height: 10.66667vw;
    z-index: 5;
    background-color: #f7f8fd;
    line-height: 6.4vw;
    padding-top: 1.33333vw;

    .van-button--round {
      padding: 0px 4vw;
    }

    .van-button__content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;

      .icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
    }
  }

  .chat-tools {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 15.46667vw;
    z-index: 1001;
    background-color: #f7f8fd;
    display: flex;
    align-items: center;
    width: 100%;
    z-index: 998;

    .bar {
      margin-left: 3.2vw;
    }

    .quick {
      width: 11.2vw;
      height: 11.2vw;
      padding: .5vw 0 0;
      color: #678cf0;
      border: 1px solid #acbbe2;
      background: url();
      border-radius: 1.06667vw;
    }

    .funbar {
      width: 0;
      flex: 1;
      background-color: #fff;
      border-radius: 1.06667vw;
      height: 11.2vw;
      line-height: 11.2vw;
      text-align: center;
      font-size: 4.26667vw;
      margin-left: 3.2vw;

      .input {
        width: 100%;
        height: 100%;
        text-align: left;

        .input-placeholder {
          color: #969799;
        }
      }
    }

    .active {
      width: calc(100% - 32.53333vw);
    }

    .send {
      width: 140rpx;
      height: 9.06667vw;
      line-height: 9.06667vw;
      padding: 0;
      margin-top: 1.06667vw;
      background: #07c160;
      border-radius: 1.06667vw;
      margin: 0 3.2vw;
    }

    .keyboardIcon {
      width: 64rpx;
      height: 64rpx;
      margin-right: 3.2vw;
    }
  }
}

.scroll-container {
  width: 9.33333vw;
  height: 9.33333vw;
  margin: 0 auto;
  overflow: hidden;
}

.tabs{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
	.tabs-item{
		padding: 20rpx;
	}
	
	.tabs-item-cli{
		position: relative;
		&:before{
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			bottom: 0;
			width: 80%;
			height: 4rpx;
			background-color: #F4AF00;
			border-radius: 10rpx;
		}
	}
}

::v-deep .van-tabs__wrap {
  background-color: transparent;

  ._item {
    justify-content: center !important;
    text-align: center !important;
  }
}

.number-roller {
  animation: roller 1.5s linear infinite
}

@keyframes roller {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}
</style>